<template>
    <BaseTable :columns="columns" :data="tableList">
        <template #checkContent="{ scope: { row } }">
            <el-select v-model="row.checkContent" size="mini" placeholder="请选择" style="width: 100%">
                <el-option v-for="m in tunnelCheckContentOptions1" :key="m.id" :label="m.name" :value="m.name" />
            </el-select>
        </template>
        <template #type="{ scope: { row } }">
            <el-select v-model="row.type" size="mini" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="m in DefectDiseaseTypeOptions" :key="m.value" :label="m.label" :value="m.label" />
            </el-select>
        </template>
        <template #location="{ scope: { row } }">
            <el-input v-model.trim="row.location" maxlength="20" clearable placeholder="请输入" />
        </template>
        <template #checkSituation="{ scope: { row } }">
            <el-input v-model.trim="row.checkSituation" maxlength="20" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #description="{ scope: { row } }">
            <el-input v-model.trim="row.description" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #level="{ scope: { row } }">
            <el-select v-model="row.level" size="mini" placeholder="请选择" style="width: 100%">
                <el-option v-for="m in levelOptions" :key="m.value" :label="m.label" :value="m.value" />
            </el-select>
        </template>
        <template #advice="{ scope: { row } }">
            <!-- <el-input v-model.trim="row.advice" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" /> -->
            <el-select v-model="row.advice" size="mini" placeholder="请选择" style="width: 100%">
                <el-option v-for="m in adviceOptions" :key="m.value" :label="m.label" :value="m.value" />
            </el-select>
        </template>
        <template #remark="{ scope: { row } }">
            <el-input v-model.trim="row.remark" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #handle="{ scope: { $index } }">
            <BaseButton v-if="$index === tableList.length - 1" type="text" @click="handleAdd">添加行</BaseButton>
            <BaseButton type="text" :disabled="tableList.length === 1" color="danger" @click="handleDelete($index)">删除</BaseButton>
        </template>
        <template #header="{ scope: { column } }">
            <i class="el-icon-info" title="“异常描述”未填写、填写“正常”时，对应记录不生成“缺陷病害”"></i>
            <span> {{ column.label }}</span>
        </template>
    </BaseTable>
</template>

<script>
import { mapState } from 'vuex'
import { LevelOptions, AdviceOptions } from '@/views/maintenance-decision/constants'
import reconfirm from '@/utils/reconfirm'
import { DefectDiseaseTypeOptions } from '@/views/maintenance-decision/constants'

export default {
    name: 'OtherFlawTable',
    data() {
        return {
            DefectDiseaseTypeOptions,
            levelOptions: LevelOptions,
            adviceOptions: AdviceOptions,
            tableList: [
                {
                    checkContent: '',
                    description: '',
                    disposalResults: '',
                    remark: ''
                }
            ],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '70',
                        type: 'index'
                    }
                },
                {
                    slot: 'location',
                    attrs: {
                        prop: 'location',
                        label: '位置/桩号',
                        width: '170'
                    }
                },
                {
                    slot: 'checkContent',
                    attrs: {
                        prop: 'checkContent',
                        label: '检查内容',
                        width: '180'
                    }
                },
                {
                    slot: 'type',
                    attrs: {
                        prop: 'type',
                        label: '上报类型',
                        width: '170'
                    }
                },
                // {
                //     slot: 'checkSituation',
                //     attrs: {
                //         prop: 'checkSituation',
                //         label: '检查情况',
                //         'min-width': '170'
                //     }
                // },
                {
                    slot: 'description',
                    headerSlot: 'header',
                    attrs: {
                        prop: 'description',
                        label: '异常描述（性质、范围、程度）',
                        'min-width': '250'
                    }
                },
                {
                    slot: 'level',
                    attrs: {
                        prop: 'level',
                        label: '判定',
                        width: '150'
                    }
                },
                {
                    slot: 'advice',
                    attrs: {
                        prop: 'advice',
                        label: '养护措施意见',
                        width: '180'
                    }
                },
                {
                    slot: 'remark',
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '170'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140'
                    }
                }
            ])
        }
    },
    computed: {
        ...mapState('types', ['tunnelCheckContentOptions1'])
    },
    created() {
        this.$store.dispatch('types/query', 'tunnelCheckContentOptions1')
    },
    methods: {
        handleAdd() {
            this.tableList.push({
                locationType: '',
                location: '',
                type: '',
                description: '',
                unit: '',
                num: '',
                disposalResults: '',
                deviceList: []
            })
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.tableList.splice(index, 1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
